import React, { Component } from 'react'
interface PropsModel {
    json: string;
}
class Pretty extends Component<PropsModel> {

    handleJSON(_v: string) {
        let json = _v;
        let a = json.match(/(\[|\]|\{|\}|\'[\/a-z0-9]{1,}\'|[a-z0-9]{1,}:\'[a-z0-9]{1,}\')/g) || [];
        let _num: number = 0;
        let arr: any[] = [];
        let isAdd = false;
        for (let i = 0; i < a.length; i++) {
            let as = a[i];
            if (isAdd) {
                _num++;
                isAdd = false;
            }
            if (as === "[" || as === "{") {
                isAdd = true;
            }

            if (as === "}" || as === "]") {
                _num--;
            }
            let s = as.replace(/([a-z0-9]{1,})\:(\'[a-z0-9]{1,}\')/, '$1: $2')
            arr.push(<div key={i}><p style={{ display: 'inline-block', textAlign: 'right', paddingRight: '5px', width: '20px', backgroundColor: '#666' }}>{i}</p><p style={{ paddingLeft: '5px', textIndent: _num * 2 + 'em', display: 'inline-block', color: '#fff' }}>{s}</p></div>)

        }
        return (arr)
    }
    render(): React.ReactNode {
        return (
            <div style={{ backgroundColor: '#333' }}>{this.handleJSON(this.props.json)}</div>
        )
    }
}

export default Pretty;